<template>
    <view class="con">
        <view class="card">
            <view v-for="(item,index) in cradList" :key="index" class="card-item" @click="deleteCard(item)">
                <view class="card-item-mo" v-if="item.is_default == 1">默认</view>
                
                <view class="card-item-top">
                    <image :src="item.bank_logo" mode="widthFix"></image>
                    <view>{{item.account_bank}}</view>
                </view>
                <view class="card-item-bottom">
                    <view>{{item.card_number}}</view>
                    <view>{{item.account_name}}</view>
                </view>
                
            </view>
        </view>
        
        <view class="card-add" @click="toPopup">
            <u-icon name="plus" color="#ffffff"></u-icon>
            <view>添加银行卡</view>
        </view>
        
        <u-popup v-model="popupShow" mode="bottom" closeable safe-area-inset-bottom>
            <view style="padding: 50rpx 60rpx 0 0;">
                <u-form :model="form" ref="uForm" label-width="180" label-align="right">
                    <u-form-item label="持卡人"><u-input v-model="form.accountName"/></u-form-item>
                    <u-form-item label="银行卡号"><u-input v-model="form.cardNumber" @blur="_postBankcardorganization()"/></u-form-item>
                    <u-form-item label="银行名"><u-input v-model="form.bankName" disabled/></u-form-item>
                    <u-form-item label="银行卡类型"><u-input v-model="form.cardType" disabled/></u-form-item>
                    <u-form-item label="开户行省份">
                        <view @click="selectRegion">
                            <text style="color: #c0c4cc;" v-if="arres">{{arres}}</text>
                            <text v-else>{{form.province_name}}{{form.city_name}}{{form.county_name}}</text>
                        </view>
                    </u-form-item>
                    <u-form-item label="开户行"><u-input v-model="form.accountBank" /></u-form-item>
                    <u-form-item label="是否默认">
                        <view style="display: flex;align-items: center;">
                            <u-switch v-model="checked" :active-value="1" :inactive-value="0" size="40" active-color="#19be6b" @change="handSwitch"></u-switch>
                        </view>
                    </u-form-item>
                </u-form>
            </view>
            <view style="width: 60%;margin: 40rpx auto 0 auto;padding-bottom: 20rpx;">
                <u-button @click="submit" type="success">提交</u-button>
            </view>
        </u-popup>
        <u-picker v-model="pickerShow" mode="region" z-index="10077" @confirm="confirm"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                popupShow: false,
                pickerShow: false,
                checked: false,
                form: {
                    bankName: '',
                    bankCode: '',
                    accountBank: '',
                    accountName: '',
                    cardNumber: '',
                    cardType: '',
                    province_name: '',
                    city_name: '',
                    county_name: '',
                    isDefault: 0,
                },
                arres: '请选择地区',
                cradList: [],
            }
        },
        onLoad() {
            this._getbankcardlist();
        },
        methods: {
            toPopup() {
                this.popupShow = true;
            },
            selectRegion() {
                this.pickerShow = true;
            },
            submit() {
                if(this.$u.test.isEmpty(this.form.accountName)) {
                    uni.showToast({
                        title: '请输入持卡人',
                        duration: 1500,
                        icon: 'none'
                    });
                    return ;
                } else if(this.$u.test.isEmpty(this.form.province_name)) {
                    uni.showToast({
                        title: '请选择地区',
                        duration: 1500,
                        icon: 'none'
                    });
                    return ;
                } else if(this.$u.test.isEmpty(this.form.accountBank)) {
                    uni.showToast({
                        title: '请输入开户行名称',
                        duration: 1500,
                        icon: 'none'
                    });
                    return ;
                } else {
                    this._postAddBankCard();
                }
            },
            handSwitch(value) {
                this.form.isDefault = value;
            },
            confirm(i) {
                this.form.province_name = i.province.label;
                this.form.city_name = i.city.label;
                this.form.county_name = i.area.label;
                this.arres = '';
            },
            _postBankcardorganization() {
                this.$u.api.postBankcardorganization({
                    card_code: this.form.cardNumber
                }).then(res => {
                    this.form.bankName = res.name;
                    this.form.cardType = res.type_name;
                    this.form.bankCode = res.bank_code;
                }).catch(err => {
                    uni.showToast({
                        title: err.msg,
                        duration: 1500,
                        icon: 'none'
                    });
                })
            },
            _postAddBankCard() {
                this.$u.api.postAddBankCard(this.form).then(res => {
                    uni.showToast({
                        title: '新增成功',
                        duration: 1500
                    });
                    this.form = {
                        bankName: '',
                        bankCode: '',
                        accountBank: '',
                        accountName: '',
                        cardNumber: '',
                        cardType: '',
                        province_name: '',
                        city_name: '',
                        county_name: '',
                        isDefault: 0,
                    }
                    this.arres = '请选择地区';
                    this.checked = false;
                    this._getbankcardlist();
                    this.popupShow = false;
                }).catch(err => {
                    uni.showToast({
                        title: err.msg,
                        duration: 1500,
                        icon: 'none'
                    });
                })
            },
            _getbankcardlist() {
                this.$u.api.getbankcardlist().then(res => {
                    this.cradList = res;
                })
            },
            deleteCard(item) {
                uni.showModal({
                    title: '提示',
                    content: '是否删除该'+ item.bank_name +'卡?',
                    confirmText: '删除',
                    confirmColor: '#ff0000',
                    success: (res) => {
                        if (res.confirm) {
                            this._postRemovebankcard(item.id);
                        } else if (res.cancel) {}
                    }
                });
            },
            _postRemovebankcard(id) {
                this.$u.api.postRemovebankcard({
                    id: id
                }).then(res => {
                    uni.showToast({
                        title: '删除成功',
                        duration: 1500
                    });
                    this._getbankcardlist();
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .con {
        
    }
    .card {
        margin: 30rpx;
        
        .card-item {
            background-color: #ffffff;
            border-radius: 20rpx;
            overflow: hidden;
            margin-bottom: 30rpx;
            position: relative;
            // display: flex;
            // align-items: center;
            // justify-content: space-between;
            
            .card-item-top {
                display: flex;
                // align-items: center;
                justify-content: space-between;
                
                image {
                    width: 400rpx;
                }
                
                view {
                    margin: 20rpx 20rpx 0 0;
                }
            }
            
            .card-item-bottom {
                display: flex;
                justify-content: space-between;
                padding: 20rpx;
            }
            
            .card-item-mo {
                width: 60rpx;
                height: 30rpx;
                position: absolute;
                right: 0;
                top: 80rpx;
                background-color: #ff3535;
                color: #ffffff;
                border-radius: 15rpx 0 0 15rpx;
                font-size: 20rpx;
                text-align: center;
            }
        }
    }
    .card-add {
        width: 300rpx;
        height: 80rpx;
        display: flex;
        background-color: #1bc078;
        border-radius: 20rpx;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        margin: 0 auto;
        color: #FFFFFF;
    }
</style>
